<template>
  <div id="transactions">
    <div id="pgcontainer">

      <!--头部的开始-->
      <header>

        <strong>Transactions</strong>
        <a href="#" class="menubtn"></a>
        <!-- use captain icon for toggle menu -->
        <div id="hamburgermenu">
          <ul>
            <li><a href="#">Scan</a></li>
            <li><a href="#">Pay</a></li>
            <li><a href="#">Receive</a></li>
            <li><a href="#">Request</a></li>
            <li><a href="#">other</a></li>
            <li><a href="#">other</a></li>
            <li><a href="#">other</a></li>
            <li><a href="#">other</a></li>
            <li><a href="#">other</a></li>

          </ul>
        </div>
        <div class="overlay"></div>
      </header>
      <!--头部的结束-->

      <!--主题内容的开始-->
      <div class="zymain">
        <div class="zybt"><strong>Transaction List</strong></div>
        <!--更换内容开始-->
        <div class="ltgd_nr">
          <ul>
            <li><a href="#">
              <div class="lzj"><img src="../assets/images/ul0923-1107_2.png"/></div>
              <h3>Transaction Name</h3>
              <p>2017-08-09 15:45</p></a>
            </li>
            <li><a href="#">
              <div class="lzj"><img src="../assets/images/ul0923-1107_2.png"/></div>
              <h3>Transaction Name</h3>
              <p>2017-08-09 15:45</p></a>
            </li>
            <li><a href="#">
              <div class="lzj"><img src="../assets/images/ul0923-1107_2.png"/></div>
              <h3>Transaction Name</h3>
              <p>2017-08-09 15:45</p></a>
            </li>
            <li><a href="#">
              <div class="lzj"><img src="../assets/images/ul0923-1107_2.png"/></div>
              <h3>Transaction Name</h3>
              <p>2017-08-09 15:45</p></a>
            </li>
            <li><a href="#">
              <div class="lzj"><img src="../assets/images/ul0923-1107_2.png"/></div>
              <h3>Transaction Name</h3>
              <p>2017-08-09 15:45</p></a>
            </li>
            <li><a href="#">
              <div class="lzj"><img src="../assets/images/ul0923-1107_2.png"/></div>
              <h3>Transaction Name</h3>
              <p>2017-08-09 15:45</p></a>
            </li>
            <li><a href="#">
              <div class="lzj"><img src="../assets/images/ul0923-1107_2.png"/></div>
              <h3>Transaction Name</h3>
              <p>2017-08-09 15:45</p></a>
            </li>
            <li><a href="#">
              <div class="lzj"><img src="../assets/images/ul0923-1107_2.png"/></div>
              <h3>Transaction Name</h3>
              <p>2017-08-09 15:45</p></a>
            </li>


            <div class="clear"></div>
          </ul>
        </div>
        <!--更换内容结束-->
      </div>
      <!--主题内容的结束-->

      <!--底部的开始-->
      <div class="lbottom">
        <p>Copryrught@2015-2020 property in copyright <a href="" target="_blank">Pay</a><br/>
          Address：Xxx-xxx-xxx-xxx-xxx</p>
      </div>
      <!--底部的结束-->
      <div class="dbgao"></div>


    </div>
  </div>

</template>
<script>

  import HeaderView from '../components/Header.vue';

  export default{
    mounted(){
        this.dealWithPage();
        this.toTransactions();
    },
    methods: {
      dealWithPage(){
        var menuwidth  = 200; // 边栏宽度
        var menuspeed  = 400; // 边栏滑出耗费时间

        var $bdy       = $('body');
        var $container = $('#pgcontainer');
        var $burger    = $('#hamburgermenu');
        var negwidth   = "+"+menuwidth+"px";
        var poswidth   = "-"+menuwidth+"px";

        $('.menubtn').on('click',function(e){
          if($bdy.hasClass('openmenu')) {
            jsAnimateMenu('close');
          } else {
            jsAnimateMenu('open');
          }
        });

        $('.overlay').on('click', function(e){
          if($bdy.hasClass('openmenu')) {
            jsAnimateMenu('close');
          }
        });

        function jsAnimateMenu(tog) {
          if(tog == 'open') {
            $bdy.addClass('openmenu');

            $container.animate({marginRight: negwidth, marginLeft: poswidth}, menuspeed);
            $burger.animate({width:"200px"}, menuspeed);
            $('.overlay').animate({left: poswidth}, menuspeed);
          }

          if(tog == 'close') {
            $bdy.removeClass('openmenu');

            $container.animate({marginRight: "0", marginLeft: "0"}, menuspeed);
            $burger.animate({width: "0"}, menuspeed);
            $('.overlay').animate({right: "0"}, menuspeed);
          }
        }
      },
      toTransactions(){
        var post = this;
        this.$http.jsonp(global.URL + "/toTransactions", //跨域请求接口
          {
            params: {}
          }).then(function (response) {
          this.users = response.data;
          if (response.data == "0") {
            swal("OMG", "Please login!", "error");
            post.$router.replace({path: '/login'})
          } else {

          }
        }, function (error) {
          swal("OMG", "Please login!", "error");
          post.$router.replace({path: '/login'})
        });
      }

    },
    components: {

      HeaderView,


    }
  }
</script>
<style>

  @import '../assets/css/ltkj.css';


</style>

